<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<ul>
		<li>对角线生成器，讲两个点连接起来，连接线是三次贝塞尔曲线</li>
		<li>d3.svg.diagonal创建</li>
		<li>两个访问器：source()、target()</li>
		<li>一个投影函数：projection(),讲坐标进行投影</li>
		<li>元数据不会更改，只是在绘制的时候使用投影后的坐标</li>
		<li>fuck 这也叫投影----三次贝塞尔曲线也叫对角线，哇</li>
	</ul>
	<div class="diagonal">	

	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".diagonal").append('svg').attr({"width":width,"height":height});

		var dataset = {
			source:{
				x:100,
				y:100
			},
			target:{
				x:300,
				y:200
			}
		}
		var diagonal = d3.svg.diagonal()
												.projection(function(d) {
													var x = d.x * 1.5;
													var y = d.y * 1.5;
													return [x,y];
												})
		svg.append("path")
				.attr("d",diagonal(dataset))
				.attr({"stroke":"black","stroke-width":3}).attr("fill","none")
	</script>
</body>
</html>